import 'package:chat_client/providers/login_provider.dart';
import 'package:chat_client/widgets/c_input.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

// 本模块组件
import '../../widgets/captcha.dart';
import '../../widgets/c_icon_btn.dart';

class WebLoginScreen extends StatefulWidget {
  const WebLoginScreen({super.key});

  @override
  WebLoginScreenState createState() => WebLoginScreenState();
}

class WebLoginScreenState extends State<WebLoginScreen> {
  // 动画控制变量
  bool _tranckerMove = true; // 控制trancker动画，及遮挡位置。true=>显示登录页
  bool _isHideRegisterNav = false; // 是否隐藏注册页导航按钮
  bool _isHideLoginNav = true; // 是否隐藏登录页导航按钮
  bool _isLoginActive = true; // 是否展示登录表单

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: ChangeNotifierProvider(
          create: (_) => LoginProvider(),
          child: Consumer<LoginProvider>(builder: (context, model, child) {
            return Container(
              width: 720,
              height: 380,
              decoration: _buildContainerDecoration(),
              child: Stack(
                children: [
                  SizedBox(width: 720),
                  _buildAnimatedPositioned(1000, 20, _isLoginActive ? 420 : 20,
                      AuthForm(model: model, isLoginActive: _isLoginActive)),
                  // 构建覆盖盒子
                  _buildAnimatedTracker(),
                  // 构建切换注册页面的导航按钮
                  _buildAnimatedPositioned(
                      600,
                      100,
                      _isHideRegisterNav ? -440 : 80,
                      _buildRegisterPageNav(delay1: 100, delay2: 400)),
                  // 构建切换登录页面的导航按钮
                  _buildAnimatedPositioned(
                      600,
                      100,
                      _isHideLoginNav ? 900 : 450,
                      _buildLoginPageNav(delay1: 100, delay2: 400)),
                ],
              ),
            );
          })),
    ));
  }

  // 构建移动叠层子组件
  Widget _buildAnimatedPositioned(
      int duration, double top, double left, Widget child) {
    return AnimatedPositioned(
      duration: Duration(milliseconds: duration),
      top: top,
      left: left,
      curve: Curves.easeOut,
      child: child,
    );
  }

  // 构建容器样式
  BoxDecoration _buildContainerDecoration() {
    return BoxDecoration(
      color: Colors.white,
      boxShadow: [
        BoxShadow(
          color: Color.fromARGB(255, 163, 163, 163),
          blurRadius: 4.0,
          offset: Offset(0, 2),
        ),
      ],
      borderRadius: BorderRadius.circular(20),
    );
  }

  // 构建背景动画层
  Widget _buildAnimatedTracker() {
    return AnimatedPositioned(
      duration: Duration(milliseconds: 1000),
      left: _tranckerMove ? -1080.0 : 320.0,
      curve: Curves.easeOut,
      child: Container(
        width: 1440,
        height: 380,
        decoration: BoxDecoration(
          color: const Color(0xFF99A8F1),
          borderRadius: BorderRadius.circular(100),
        ),
      ),
    );
  }

  // 构建切换注册页面的导航按钮
  Widget _buildRegisterPageNav({required int delay1, required int delay2}) {
    return _buildLoginNav(
        '注册',
        delay1,
        delay2,
        // 隐藏注册导航
        () => _isHideRegisterNav = !_isHideRegisterNav,
        // 显示登录导航
        () => _isHideLoginNav = !_isHideLoginNav);
  }

  // 构建切换登录页面的导航按钮
  Widget _buildLoginPageNav({required int delay1, required int delay2}) {
    return _buildLoginNav(
      '登录',
      delay1,
      delay2,
      // 隐藏登录导航
      () => _isHideLoginNav = !_isHideLoginNav,
      // 显示注册导航
      () => _isHideRegisterNav = !_isHideRegisterNav,
    );
  }

  // 构建导航页
  Widget _buildLoginNav(
      String text, int delay1, int delay2, Function fun1, Function fun2) {
    return Column(
      children: [
        _BrandTitle(),
        SizedBox(
          height: 30,
        ),
        SizedBox(
          width: 150,
          child: ElevatedButton(
            style: ElevatedButton.styleFrom(
                side: BorderSide(width: 1, color: Colors.white)),
            onPressed: () {
              // 开时动画，移动tracker
              setState(() {
                _tranckerMove = !_tranckerMove;
              });
              // 延迟切换表
              Future.delayed(Duration(milliseconds: delay1), () {
                setState(() {
                  _isLoginActive = !_isLoginActive;
                  fun1();
                });
              });
              Future.delayed(Duration(milliseconds: delay2), () {
                setState(() {
                  fun2();
                });
              });
            },
            child: Text(text),
          ),
        )
      ],
    );
  }
}

// 标题组件
class _BrandTitle extends StatelessWidget {
  const _BrandTitle();

  @override
  Widget build(BuildContext context) {
    return const Column(
      children: [
        Text(
          'echo',
          style: TextStyle(
            fontFamily: 'MysteryQuest',
            fontSize: 40,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
        ),
        Text(
          'echo - Connecting Voices',
          style: TextStyle(
            fontFamily: 'MysteryQuest',
            fontSize: 18,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
        ),
      ],
    );
  }
}

// 表单组件
class AuthForm extends StatelessWidget {
  final LoginProvider model;
  final bool isLoginActive;
  const AuthForm({
    super.key,
    required this.model,
    required this.isLoginActive,
  });

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 280,
      child: isLoginActive
          ? _buildLoginForm(context)
          : _buildRegistrationForm(context),
    );
  }

  Widget _buildLoginForm(BuildContext context) {
    return Column(
      children: [
        Text(
          'Login',
          style: TextStyle(
            fontSize: 32,
            fontWeight: FontWeight.bold,
            color: Colors.black,
          ),
        ),
        SizedBox(height: 20),
        // 登录用户名输入框
        InputField(
          controller: model.usernameController,
          icon: Icons.person,
          labelText: '用户名',
        ),
        SizedBox(height: 20),
        // 登录密码输入框
        InputField(
          controller: model.passwordController,
          isPassword: true,
          labelText: '密码',
        ),
        SizedBox(height: 20),
        SizedBox(
          width: 280,
          child: ElevatedButton(
            onPressed: () {
              model.login();
            },
            child: const Text('登录'),
          ),
        ),
        SizedBox(height: 20),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            IconWithTextButton(
              icon: Icons.phone_android,
              label: '手机号登录',
              size: 18,
              onPressed: () {},
            ),
            IconWithTextButton(
              icon: Icons.more_horiz,
              label: '找回密码',
              size: 18,
              onPressed: () {},
            ),
          ],
        ),
      ],
    );
  }

  Widget _buildRegistrationForm(BuildContext context) {
    return Column(
      children: [
        Text(
          'Registration',
          style: TextStyle(
            fontSize: 32,
            fontWeight: FontWeight.bold,
            color: Colors.black,
          ),
        ),
        SizedBox(height: 20),
        // 电话号码输入框
        InputField(
          controller: model.phoneController,
          icon: Icons.person,
          labelText: '电话号码',
        ),
        SizedBox(height: 20),
        // 验证码输入框
        InputField(
          controller: model.captchaController,
          icon: Icons.person,
          labelText: '验证码',
          rightSlot: Captcha(
            onCaptchaUidChanged: model.handleCaptchaUidChanged,
          ),
        ),
        SizedBox(height: 20),
        // 登录密码输入框
        InputField(
          controller: model.passwordController,
          isPassword: true,
          labelText: '密码',
        ),
        SizedBox(height: 20),
        SizedBox(
          width: 280,
          child: ElevatedButton(
            onPressed: () {
              model.register();
            },
            child: const Text('注册'),
          ),
        ),
      ],
    );
  }
}
